<template>
  <div class="layout-container testSceneExplainDescriptContainer">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="onHandleClick">
      <el-tab-pane label="初始部署关系描述项" name="initDeployRelateDescript">
        <InitDeployRelateDescript
          ref="testSceenRef"
          :interferType="props.interferType"
          :dataSourceObject="props.dataSourceObject"
        />
      </el-tab-pane>
      <el-tab-pane label="试验说明描述项" name="testExplainDescript">
        <TestExplainDescript
          ref="testExplainRef"
          :dataSourceObject="props.dataSourceObject"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from 'vue';
import type { TabsInstance } from 'element-plus';
import type { TabsPaneContext } from 'element-plus';
import InitDeployRelateDescript from './InitDeployRelateDescript.vue';
import TestExplainDescript from './TestExplainDescript.vue';

const tabPosition = ref<TabsInstance['tabPosition']>('left');
const activeName = ref<string>('initDeployRelateDescript');
const testSceenRef = ref();
const testExplainRef = ref();
// 接收父组件传递过来的props
const props = defineProps({
  interferType: { type: String, default: '舰载有源干扰-雷达' },
  dataSourceObject: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

// 页签切换事件
const onHandleClick = (TabPaneName: string) => {
  activeName.value = TabPaneName;
};

// 校验表单
const validateFieldFun = async () => {
  await testSceenRef.value.onSubmit(testSceenRef.value.formRef);
  await testExplainRef.value.onSubmit(testExplainRef.value.formRef);
  if (testSceenRef.value.validateState || testExplainRef.value.validateState2) {
    return true;
  }
};

defineExpose({
  validateFieldFun,
  // validateState: testSceenRef.value?.validateState,
  // validateState2: testExplainRef.value?.validateState2,
});
</script>

<style lang="scss" scoped>
@import '@/assets/style/buttons';
:deep() {
  .el-tabs__nav-wrap::after {
    width: 280px;
  }
}
</style>
